<!--组件-输入框-->
<template>
  <div>

    <!--标题、说明、范围-->
    <div class="title all" v-if="title">
      <text class="font28 text2">{{title}}</text>
      <LImage class="explain" v-if="explain && explain.length" :src="config.img('wenhao.png')" @click="explainClick"></LImage>
      <div class="width8" v-else></div>
      <text class="font24 text3" v-if="(min && min.length) || (max && max.length)" >{{T('范围') + (min ? min : '∞') + ' ~ ' + (max ? max : '∞')}}</text>
    </div>

    <!--输入框-->
    <div :class="['frame', 'bg2', getTypeStyle()]" @click="frameClick">
      
      <input :class="['input', 'font28', isEdit?'text1':'text2']"
      v-model="value"
      :ref="'input'"
      :placeholder="placeholder"
      :type="type"
      @input="onInput" @focus="onFocus" @blur="onBlur">

             
      <div class="line no1" v-if="unit"></div>
      <text class="font28 text2" v-if="unit">{{unit}}</text>

      <div class="no" v-if="!isEdit" @click="noClick"></div>
    </div>
  </div>
</template>

<script>

import modal from "@/_js/modal";
import config from "@/_js/config";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
export default {

  model:{
    prop:"value",
    event:"change",
  },

  props:{
    value: { //值
      type:String,
      default:'',
    },

    type: {
      type:String,
      default:'number',
    },

    isEdit: { //turn可编辑
      type:Boolean,
      default:true,
    },
    
    integer: { //整数位-默认9
      type:Number,
      default:9,
    },

    decimal: { //小数位-默认6
      type:Number,
      default:6,
    },

    optional: { //turn可选 false必选
      type:Boolean,
      default:false,
    },

    title: { //标题
      type:String,
      default:undefined,
    },

    explain: { //说明
      type:String,
      default:undefined,
    },

    min: { //限制范围-最小
      type:String,
      default:undefined,
    },

    max: { //限制范围-最大
      type:String,
      default:undefined,
    },

    placeholder: { //占位符
      type:String,
      default:'',
    },

    unit: { //单位
      type:String,
      default:undefined,
    },
  },

  data() {
    return {
      T:T,
      config:config,

      type:0, //0未选中 1选中 -1警告
      select:false,
    };
  },

  mounted(){
  },

  methods:{

    //初始化类型
    initType() {

      //隐藏警告逻辑
      // if (this.optional && !this.value.length) {
      //     this.type = this.select ? 1 : 0;
      // } else if (!this.value.length ||
      //     (this.min && math.getNumber(this.value) < math.getNumber(this.min)) ||
      //     (this.max && math.getNumber(this.value) > math.getNumber(this.max))) {
      //     this.type = -1;
      // } else {
      //     this.type = this.select ? 1 : 0;
      // }
    },

    //获取类型样式
    getTypeStyle(){
      if (this.type == 0) {
        return '';
      } else if (this.type == 1) {
        return 'main-b1';
      } else if (this.type == -1) {
        return 'warning-b1';
      } 
    },

    /**********************************************输入框回调*/
    //输入框-选中
    onFocus(e) {

      this.select = true;
      this.initType();
      
      this.$emit("focus", e);
    },

    //输入框-取消选中
    onBlur(e) {
      // this.$emit("change", e.value);

      this.select = false;
      this.initType();

      this.$emit("blur", e);
    },

    //输入内容改变
    onInput(e){
      this.$emit("change", e.value);
      
      this.initType();

      this.$emit("input", e);
    },

    /**********************************************点击回调*/
    //输入框点击
    frameClick(){
      if (!this.isEdit){
        return;
      }
      this.$refs.input && this.$refs.input.focus();
    },

    //说明点击
    explainClick(){
      var parm = {'message':this.explain};
      modal.alert(parm,(bool)=>{
        navigator.back();
      });
    },

    //不可编辑蒙层
    noClick() {},
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.title{
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
.explain {
  width: 28px;
  height: 28px;
  margin-left: 8px;
  margin-right: 8px;
}
.frame{
  flex-direction: row;
  align-items: center;

  height: 88px;
  border-radius: 16px;

  border-width: 2px;
  border-color: transparent;

  padding-left: 40px;
  padding-right: 40px;
}
.input{
  flex: 1;
  height: 88px;
  placeholder-color:#6E7488;
}
.text {
  justify-content: center;
  flex: 1;
  height: 80px;
}
.line{
  width: 2px;
  height: 32px;

  margin-left: 20px;
  margin-right: 20px;
}
.no {
  position:absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.width8{
  width: 8px;
}
</style>
